import { LitElement, css, html } from "lit";
import {
  // PropertyDeclaration,
  type PropertyDeclarations,
  // PropertyValues,
} from "lit";
import { customElement } from "lit/decorators.js";
// import { SignalWatcher, signal } from "@lit-labs/signals";

// <iconify-icon icon="material-symbols:arrow-left-rounded" height="20"></iconify-icon>
// <span class="icon--material-symbols icon--material-symbols--arrow-left-rounded></span>

@customElement("iconify-icon")
class IconifyIcon extends LitElement {
  static override styles = css`
    .icon--material-symbols {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-color: currentColor;
      -webkit-mask-image: var(--svg);
      mask-image: var(--svg);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

    .icon--material-symbols--arrow-left-rounded {
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15'/%3E%3C/svg%3E");
    }
  `;

  static override properties: PropertyDeclarations = {
    icon: {
      // attribute: false,
      type: String,
      // converter: (value) => {
      //   if (!value) {
      //     throw new Error("Iconify: icon is required");
      //   }
      //   return `icon--${value.split(":")[0]} icon--${value.replace(/:/, "--")}`;
      // },
    },
    width: {
      // attribute: false,
      type: Number,
      // converter(value) {
      //   return value ? "width:" + value + "px;" : "";
      // },
    },
    height: {
      // attribute: false,
      type: Number,
      // converter(value) {
      //   return value ? "height:" + value + "px;" : "";
      // },
    },
  };

  declare icon: string;

  declare height: number;

  declare width: number;

  constructor(icon: string, height: number, width: number) {
    super();
    this.icon = icon;
    this.height = height;
    this.width = width;
  }

  #getIconClass() {
    return `icon--${this.icon.split(":")[0]} icon--${this.icon.replace(/:/, "--")}`;
  }

  #getWidthClass() {
    return this.width ? `width: ${this.width}px;` : "";
  }

  #getHeightClass() {
    return this.height ? `height: ${this.height}px;` : "";
  }

  override render() {
    return html`<span
      class="${this.#getIconClass()}"
      style="${`${this.#getWidthClass()} ${this.#getHeightClass()}`} position: relative; bottom: -3px;"
    ></span>`;
  }
}

export { IconifyIcon };
